<template>
  <div>
    <h1>我是styluls组件</h1>
    <div class="container">
      <div class="box"></div>
    </div>
    <div class="box_active"></div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="stylus">
// 样式的简写
// .container
// width: 300px
// height: 300px
// background: red
// .box
// width: 100px
// height: 100px
// background: yellow

// 引用父级元素 通过&引用父级类名
// .box_active
// .box {
//   width: 100px;
//   height: 100px;
//   background: red;

//   &:hover {
//     background: yellow;
//   }

//   &_active {
//     width: 200px;
//     height: 200px;
//     background: blue;
//   }
// }

// 定义变量
// w = 300px
// h = 300px
// .container{
// width: w;
// height: h;
// background: red;
// }
// 定义数组
// arr = 200px 300px
// .container{
// width: arr[0];
// height: arr[1];
// background: red;
// }
.container{
        width: 100px;
        height: 100px;
}


// 支持判断
judge = false;
if judge
    .container
        background: red;
else
    .container
        background: blue;
// 支持函数
// 定义函数
add(a,b)
    a+b
// .container{
//     // 调用函数
//     width: add(100,200)px
//     height: 100px
//     background: red
// }

getnum()
    100px 200px
.container{
    // 调用函数
    width: getnum()[1]
    height: 100px
    background: red
}

</style>